<template>
  <div class="adminHome" router>
    <el-container>
      <el-header>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1">学生成绩后台管理系统</el-menu-item>
          <el-menu-item index="2" style="float: right">
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ user.account }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="UserInfo()">用户信息</el-dropdown-item>
                  <el-dropdown-item @click="logout()">注销</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="10%">
          <el-menu
            :uniqueOpened="true"
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="2" @click="chart()">
              <i class="el-icon-search"></i>
              <template #title>可视化查看</template>
            </el-menu-item>
            <el-menu-item index="3" @click="infoStatistics()">
              <i class="el-icon-document"></i>
              <template #title>信息统计</template>
            </el-menu-item>
            <el-menu-item index="5" @click="setClass()">
              <i class="el-icon-s-data"></i>
              <template #title>课程设置</template>
            </el-menu-item>
            <el-menu-item index="6" @click="UserInfo()">
              <i class="el-icon-user-solid"></i>
              <template #title>用户管理</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { nextTick } from "vue";
export default {
  name: "AdminHome",
  data() {
    return {
      user: {
        account: "",
        level: "",
      },
    };
  },
  methods: {
    setClass() {
      this.$router.push({
        name: "SetClass",
      });
    },
    UserInfo() {
      this.$router.push({
        name: "UserInfo",
      });
    },
    infoStatistics() {
      this.$router.push({
        name: "InfoStatistics",
      });
    },
    chart() {
      this.$router.push({
        name: "Chart",
      });
    },
    logout(){
      sessionStorage.clear();
      this.$router.push({
        name: "Login",
      });
    }
  },
  mounted() {
    this.user.account = sessionStorage.getItem("account");
    if (sessionStorage.getItem("level") === "学生") {
      alert(sessionStorage.getItem("level"));
      this.$router.push({
        name: "Login",
      });
    }
    this.$router.push("Chart");
  },
};
</script>

<style scoped>
.studentHome {
  /*设置全局大小*/
  position: fixed;
  width: 100%;
  height: 100%;
}
.el-header {
  padding: 0px;
}
.el-footer {
  background-color: white;
  color: #333;
  text-align: left;
  line-height: 60px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  /*设置全局大小*/
  /*使用者  position: fixed 老是出问题。。布局，很难受。。
    我这里用height:100vh 效果类似先这样
  */
  /*position: fixed;*/
  width: auto;
  height: 100vh;
}
.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  height: 100%;
}
.el-menu-vertical-demo {
  height: 100%;
}
.el-dropdown-link{
  color: #ffffff;
}
</style>